<template>
	<view>
		<view class="input-item">
			<view class="title">
				<text class="iconfont" style="color: #e64340;">&#xe605;</text>工号</view>
			<view class="input-content">
				<input class="text-input" type="text"  v-model="id" disabled />
			</view>
		</view>
		<!-- 		<view class="input-item">
			<view class="title">姓名</view>
			<view class="input-content">
				<input class="text-input" type="text" placeholder="姓名不可修改"  v-model="name" disabled/>
			</view>
		</view> -->
		<view class="input-item">
			<view class="title">
				<text class="iconfont" style="color: #0a2be6;">&#xe640;</text>地址</view>
			<view class="input-content">
				<input class="text-input" type="text" placeholder="请输入地址" v-model="address" />
			</view>
		</view>
		<view class="input-item">
			<view class="title">
				<text class="iconfont" style="color: #bb76e6;">&#xe66f;</text>电话</view>
			<view class="input-content">
				<input class="text-input" type="text" placeholder="请输入电话" v-model="tel" />
			</view>
		</view>
		<view class="input-item">
			<view class="title">
				<text class="iconfont" style="color: #22e649;">&#xe62b;</text>邮箱</view>
			<view class="input-content">
				<input class="text-input" type="text" placeholder="请输入邮箱" v-model="email" />
			</view>
		</view>
		<view class="input-item">
			<view class="title">
				<text class="iconfont" style="color: #e6cf1b;">&#xe666;</text>职称</view>
			<view class="input-content">
				<picker @change="positionIndex=$event.detail.value" :value="positionIndex" :range="position" range-key="name">
					<text>{{position[positionIndex].name}}</text>
				</picker>
			</view>
		</view>
		<view class="input-item">
			<view class="title">
				<text class="iconfont" style="color: #2ac4e6;">&#xe620;</text>研究领域</view>
			<view class="input-content">
				<input class="text-input" type="text" placeholder="请输入研究领域" v-model="researchArea" />
			</view>
		</view>
		<view class="bottom">
			<button type="primary" @click="submit">
				<text class="iconfont" style="color: #FFF;">&#xe64a;</text>保存</button>
		</view>
	</view>
</template>
<script>
	import {
		getPersonInfo,
		setPersonInfo
	} from '@/api/tPersonInfo.js'
	export default {
		data() {
			return {
				id: '',
				// name: '',
				gender: [{
					name: '男'
				}, {
					name: '女'
				}],
				genderIndex: 0,
				depart: '',
				address: '',
				tel: '',
				email: '',
				researchArea: '',
				position: [{
						name: '教授'
					},
					{
						name: '副教授'
					},
					{
						name: '高级工程师'
					},
					{
						name: '讲师'
					},
					{
						name: '研究员'
					},
					{
						name: '未定'
					}
				],
				positionIndex: 0,
			}
		},
		methods: {
			getData() {
				uni.showLoading()
				getPersonInfo({
					id: this.id
				}).then(res => {
					// console.log(res)
					this.address = res.data.data.address
					this.tel = res.data.data.tel
					this.email = res.data.data.email
					this.researchArea = res.data.data.researchArea
					for (let i in this.position) {
						if (this.position[i].name == res.data.data.professionalTitle) {
							this.positionIndex = i
							break
						}
					}
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
					uni.showModal({
						content: '请求错误'
					})
				})
			},
			submit() {
				const telreg = /^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
				if (this.tel.length > 0 && !telreg.test(this.tel)) {
					uni.showModal({
						content: "电话号码不正确"
					})
					return;
				}
				const emreg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
				if (this.email.length > 0 && !emreg.test(this.email)) {
					uni.showModal({
						content: "邮箱不正确"
					})
					return;
				}
				let data = {
					id: this.id,
					// name: this.name,
					// gender: this.genderIndex == 2 ? '' : this.gender[this.genderIndex].name,
					// depart: this.depart,
					address: this.address,
					tel: this.tel,
					email: this.email,
					professionalTitle: this.position[this.positionIndex].name,
					researchArea: this.researchArea
				}
				setPersonInfo(data).then(res => {
					if (res.data.code == 0) {
						uni.showModal({
							content: '提交成功'
						})
					}else{
						uni.showModal({
							content: '提交失败'
						})
					}
				}).catch(err=>{
					uni.showModal({
						content: '请求出错'
					})
				})


			}
		},
		onLoad() {
			//获得数据
			this.id = getApp().globalData.id
			this.getData()
		}
	}
</script>

<style>
	.iconfont {
		font-family: "iconfont" !important;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #C0C0C0;
		font-size: 16px;
		margin-right: 5px;
	}
	
	.input-item {
		height: auto;
		position: relative;
		height: 40px;
		margin: 5px 10px;
		border-bottom: 1px solid #C0C0C0;
		font-family: 'Courier New', Courier, monospace;
	}

	.input-item .title {
		position: absolute;
		top: 0;
		left: 0;
		width: 35%;
		height: 100%;
		/* text-align: center; */
		line-height: 40px;
		margin-left: 10px;
	}

	.input-item .input-content {
		position: absolute;
		top: 0;
		right: 0;
		width: 65%;
		height: 100%;
	}

	.input-item .input-content picker {
		margin-top: 8px;
		font-size: 18px;
	}

	.input-item .input-content .text-input {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}


	.bottom {
		margin-top: 30px;
		padding: 0 10px;
	}
</style>
